<template>
  <div style="display: flex; justify-content: left" v-show="show">
    <div class="control-wrapper">
      <div class="control-btn control-top" @mousedown="ptzCamera('up')" @mouseup="ptzCamera('stop')">
        <i class="iconfont"> &#xe606; </i>
        <div class="control-inner-btn control-inner"></div>
      </div>
      <div class="control-btn control-left" @mousedown="ptzCamera('left')" @mouseup="ptzCamera('stop')">
        <i class="iconfont"> &#xe60a; </i>
        <div class="control-inner-btn control-inner"></div>
      </div>
      <div class="control-btn control-bottom" @mousedown="ptzCamera('down')" @mouseup="ptzCamera('stop')">
        <i class="iconfont"> &#xe608; </i>
        <div class="control-inner-btn control-inner"></div>
      </div>
      <div class="control-btn control-right" @mousedown="ptzCamera('right')" @mouseup="ptzCamera('stop')">
        <i class="iconfont"> &#xe60b; </i>
        <div class="control-inner-btn control-inner"></div>
      </div>
      <div class="control-round">
        <div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
      </div>
      <div class="zoom-control zoom-control-1" @mousedown="ptzCamera('zoomin')" @mouseup="ptzCamera('stop')">
        <i class="iconfont control-zoom-btn" style="font-size: 26px"> &#xe681; </i>
      </div>
      <div class="zoom-control zoom-control-2" @mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')">
        <i class="iconfont control-zoom-btn" style="font-size: 26px"> &#xe682; </i>
      </div>
      <div class="zoom-control zoom-control-3" @click="ptzCancel">
        <i class="iconfont control-zoom-btn" style="font-size: 26px"> &#xe65c; </i>
      </div>
      <!-- <div class="contro-speed" style="position: absolute; left: 4px; top: 7rem; width: 9rem">
        <el-slider v-model="controSpeed" control-btn:max="255" />
      </div> -->
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  const show = ref(false);
  const emit = defineEmits(['ptzChange']);

  function ptzCamera(command) {
    console.log('云台控制：' + command);
    emit('ptzChange', { command, controSpeed: 30 });
  }
  function ptzShow() {
    show.value = true;
  }
  function ptzCancel() {
    show.value = false;
  }

  defineExpose({ ptzShow });
</script>

<style scoped lang="less">
  .control-wrapper {
    position: relative;
    width: 6.25rem;
    height: 6.25rem;
    max-width: 6.25rem;
    max-height: 6.25rem;
    border-radius: 100%;
    float: left;
  }

  .control-panel {
    position: relative;
    top: 0;
    left: 5rem;
    height: 11rem;
    max-height: 11rem;
  }

  .control-btn {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 44%;
    height: 44%;
    border-radius: 5px;
    border: 2px solid #ffffff;
    box-sizing: border-box;
    transition: all 0.3s linear;
    user-select: none;
  }

  .control-btn:hover {
    cursor: pointer;
  }

  .control-btn i {
    font-size: 20px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
  }

  .control-btn i:hover {
    cursor: pointer;
  }

  .control-zoom-btn {
    color: #fff;
  }

  .control-zoom-btn:hover {
    cursor: pointer;
    color: #fff;
  }

  .control-round {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: #fff;
    border-radius: 100%;
  }

  .control-round-inner {
    position: absolute;
    left: 13%;
    top: 13%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 70%;
    font-size: 40px;
    color: #0d7be9;
    border: 1px solid #0d7be9;
    border-radius: 100%;
    transition: all 0.3s linear;
  }

  .control-inner-btn {
    position: absolute;
    width: 60%;
    height: 60%;
    background: #fafafa;
  }

  .control-top {
    top: -8%;
    left: 27%;
    transform: rotate(-45deg);
    border-radius: 5px 100% 5px 0;
  }

  .control-top i {
    transform: rotate(45deg);
    border-radius: 5px 100% 5px 0;
  }

  .control-top .control-inner {
    left: -1px;
    bottom: 0;
    border-top: 1px solid #0d7be9;
    border-right: 1px solid #0d7be9;
    border-radius: 0 100% 0 0;
  }

  .control-top .fa {
    transform: rotate(45deg) translateY(-7px);
  }

  .control-left {
    top: 27%;
    left: -8%;
    transform: rotate(45deg);
    border-radius: 5px 0 5px 100%;
  }

  .control-left i {
    transform: rotate(-45deg);
  }

  .control-left .control-inner {
    right: -1px;
    top: -1px;
    border-bottom: 1px solid #0d7be9;
    border-left: 1px solid #0d7be9;
    border-radius: 0 0 0 100%;
  }

  .control-left .fa {
    transform: rotate(-45deg) translateX(-7px);
  }

  .control-right {
    top: 27%;
    right: -8%;
    transform: rotate(45deg);
    border-radius: 5px 100% 5px 0;
  }

  .control-right i {
    transform: rotate(-45deg);
  }

  .control-right .control-inner {
    left: -1px;
    bottom: -1px;
    border-top: 1px solid #0d7be9;
    border-right: 1px solid #0d7be9;
    border-radius: 0 100% 0 0;
  }

  .control-right .fa {
    transform: rotate(-45deg) translateX(7px);
  }

  .control-bottom {
    left: 27%;
    bottom: -8%;
    transform: rotate(45deg);
    border-radius: 0 5px 100% 5px;
  }

  .control-bottom i {
    transform: rotate(-45deg);
  }

  .control-bottom .control-inner {
    top: -1px;
    left: -1px;
    border-bottom: 1px solid #0d7be9;
    border-right: 1px solid #0d7be9;
    border-radius: 0 0 100% 0;
  }

  .control-bottom .fa {
    transform: rotate(-45deg) translateY(7px);
  }

  .zoom-control {
    position: absolute;
    top: 7.25rem;
    width: 26px;
    height: 26px;
  }
  .zoom-control-1 {
    left: 0%;
  }
  .zoom-control-2 {
    left: calc(50% - 13px);
  }
  .zoom-control-3 {
    right: 0%;
  }
  .iconfont {
    user-select: none;
  }
</style>
